<!DOCTYPE html>
<html>
<head>

    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../../css/oksub.css">
    <meta charset="utf-8">
    <title></title>
</head>
<style>
    .list-con {
        padding: 0 10px 15px 10px;
        margin-bottom: 20px;
    }

    .list-con .layui-table td,
    .layui-table-view,
    .layui-table[lay-skin=line],
    .layui-table[lay-skin=row] {
        border: none;
    }

    .list-con .layui-table tbody {
        color: #777777;
    }

    .list-con .layui-table tbody tr:hover,
    .layui-table[lay-even] tr:nth-child(even) {
        background-color: rgb(255, 255, 255);
        color: #000000;
    }

    .layui-table tr {
        border-bottom: 1px #e2e2e2 solid;
    }

    body .layui-layer-molv .layui-layer-title {
        background: #1E9FFF;
        color: #fff;
        border: none;
    }

    body .layui-layer-molv .layui-layer-maxmin:hover {
        color: #ffffff;
    }

    body .layui-layer-molv .layui-layer-btn a {
        background: #1E9FFF;
        color: #fff;
        border: none;
    }

    body .layui-layer-molv .layui-layer-btn .layui-layer-btn1 {
        background: #8bc2ef;
        color: #fff;
        border: none;
    }

    .required {
        /* color: red;  */
        color: #ffb800;
        font-size: 32px;
        float: left;
        margin-left: 5px;
        margin-top: 5px;
        position: absolute;
        right: -15px;
    }

    .addtea-con .layui-form-select dl dd.layui-this {
        background-color: #1E9FFF !important;
    }

    .addtea-con .layui-btn {
        background-color: #1E9FFF !important;
    }

    .addtea-con .layui-form-select dl {
        max-height: 230px !important;
    }
</style>
<body>
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>部门管理</legend>
</fieldset>
<div class="layui-row">
    <form class="layui-form" style="margin-top:15px;margin-bottom: 25px" action="">
        <div class="layui-inline">
            <label class="layui-form-label">部门ID</label>
            <div class="layui-input-block">
                <input id="depId" type="text" placeholder="请输入部门ID" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">部门名称</label>
            <div class="layui-input-block">
                <input id="depName" type="text" placeholder="请输入部门名称" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">部门描述</label>
            <div class="layui-input-block">
                <input id="des" type="text" placeholder="请输入部门描述" class="layui-input">
            </div>
        </div>
        <div id="selectForm" class="layui-btn layui-btn-normal">
            <i class="layui-icon layui-icon-search" style="font-size: 14px">搜索</i>
        </div>
        <div id="selectEmpty" class="layui-btn layui-btn-normal">
            刷新
        </div>
    </form>
</div>

<!--数据表格-->
<div class="list-con">
    <table class="layui-hide" id="tableId" lay-filter="test"></table>
</div>
<form style="display:none;margin: 20px 60px 20px 20px" class="layui-form" id="departmentEdit" name="departmentEdit"
      action="" lay-filter="departmentu">
    <div class="layui-form-item">
        <label class="layui-form-label">部门ID&#12288;</label>
        <div class="layui-input-block">
            <input type="text" name="departmentId" id="departmentId" lay-verify="required"
                   style="background-color: #dcdcdc" placeholder="请输入" autocomplete="off" class="layui-input"
                   disabled="disabled">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">部门名称&#12288;</label>
        <div class="layui-input-block">
            <input id="departmentName" name="departmentName" type="text" style="float: left;position: relative;"
                   class="layui-input" placeholder="请输入部门名称" lay-verify="required|phone" autocomplete="off">
            <i class="required">*</i>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">部门描述</label>
        <div class="layui-input-block">
            <input id="description" name="description" type="text" style="float: left;position: relative;"
                   class="layui-input" placeholder="请输入部门描述" lay-verify="email" autocomplete="off">
            <i class="required">*</i>
        </div>
    </div>
</form>
</body>


<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="../../lib/layui/layui.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/application.js"></script>
<!--    <script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>-->
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script>
    layui.use(['table', 'layer'], function () {
        var table = layui.table;
        var layer= layui.layer
        //部门数据绑定
        let depList = table.render({
            elem: '#tableId',
            url: mainUri + "/dep/getDepartment",
            page: true,
            title: '用户数据表',
            cols: [[
                {field: 'departmentId', title: '部门ID', fixed: 'left', unresize: true, sort: true},
                {field: 'departmentName', title: '部门名称', width: 300},
                {field: 'description', title: '描述'},
                {fixed: 'right', title: '操作', toolbar: '#barDemo'}
            ]],
            page: {
                layout: ['prev', 'page', 'next', 'skip', 'count'],
                groups: 3,
                limit: 15,
                theme: '#1E9FFF',
            },
            skin: 'row', //行边框风格:line （行边框风格） row （列边框风格） nob （无边框风格）
            even: true, //开启隔行背景:true/false
            size: 'sm',//设定表格尺寸:sm （小尺寸） lg （大尺寸）
            done: function (res, curr, count) {
            }

        });

        //刷新
        $("#selectEmpty").on('click', function () {
            //搜索框置空
            $("#depId").val("");
            $("#depName").val("");
            $("#des").val("");
            depList.reload({
                url: mainUri + "/dep/getDepartment",
                page: {
                    curr: 1 //回到第一页
                }
            })

        })

        ///搜索
        $("#selectForm").on('click', selectForm);

        function selectForm() {
            //获取到输入的值
            let departmentId = document.getElementById("depId").value;
            let departmentName = document.getElementById("depName").value;
            let description = document.getElementById("des").value;
            depList.reload({
                url: mainUri + "/dep/getDepByCondition",
                where: {
                    departmentId: departmentId, departmentName: departmentName, description: description
                },
                page: {
                    curr: 1
                }
            });
        }

        //监听行工具事件
        //删除部门操作
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('确定删除此部门吗？', function (index) {
                    showloading(true)
                    $.ajax({
                        type: 'post',
                        url: mainUri + "/dep/delete", // ajax请求路径
                        data: {departmentId: data.departmentId},//传到服务器的参数
                        success: function (data) {
                            showloading(false)
                            if (data.data > 0) {
                                layer.msg('删除成功');
                                depList.reload();
                            } else {
                                layer.msg('删除失败');
                            }
                        },
                        error:function(){
                            showloading(false)
                        }
                    });
                });
            } else if (obj.event === 'edit') {
                //获取到部门信息
                $("#departmentId").val(obj.data.departmentId);
                $("#departmentName").val(obj.data.departmentName);
                $("#description").val(obj.data.description);
                openDetial(obj, obj.data)
            }
        });

        //部门修改
        function openDetial(title, area, obj) {
            layer.open({
                type: 1,
                title: "部门信息修改",
                closeBtn: 1,
                skin: 'layui-layer-molv',
                area: area,
                shade: 0.6,
                maxmin: true,//允许全屏最小化
                id: (new Date()).valueOf(), //设定一个id，防止重复弹出 时间戳1280977330748
                btn: ['保存', '取消'],
                btnAlign: 'r',
                content: $("#departmentEdit"),//引用的弹出层的页面层的方式加载修改界面表单
                area: ['500px', '480px'],
                success: function (index) {
                    //form.render()
                },
                btn1: function (index, layero) {
                    showloading(true)
                    $.ajax({
                        url: mainUri + "/dep/update",
                        type: "POST",
                        data: {
                            "departmentId": $("#departmentId").val(),
                            "departmentName": $("#departmentName").val(),
                            "description": $("#description").val()
                        },    //这个是传给后台的值
                        dataType: "json",
                        success: function (data) {
                            showloading(false)
                            if (data.code == 0) {
                                layer.msg("修改成功", {icon: 6});
                                layer.closeAll();//关闭弹窗
                                depList.reload();

                            } else {
                                layer.msg("修改失败", {icon: 5});
                            }
                        },
                        error:function(){
                            showloading(false)
                        }

                    });
                },
                btn2: function (index, layero) {
                }
            });
        }
    });
</script>
</html>
